<template>
  <div id="single-blog" class="single-blog">
    <h3>{{ blog.title | upperCase }}</h3>
    <span>作者：{{ blog.author }}</span>
    <ul>
      <span class="cate">分类：</span><li v-for="category in blog.categories">{{ category }}&nbsp;/&nbsp;</li>
    </ul>
    <article>{{ blog.content }}</article>
    <button class="del button-del" v-on:click="deleteBlog()">删除</button>
    <button class="del button-warn" v-on:click="editBlog()">编辑</button>
  </div>
</template>

<script>
  /*
  *    注意，$route和$router是两个不同的方法
  *    $route是当前router跳转对象，里面可获取path、name、params、query...
  *    $router是VueRouter实例。想导航至不同url，可使用$router.push()
  */
  import Axios from 'axios'

  export default {
    name: 'single-blog',
    data() {
      return {
        id: this.$route.params.id,
        blog: {
          title: '',
          content: '',
          author: '',
          categories: []
        },
      }
    },
    methods: {
      deleteBlog: function () {
        var dialogue = confirm("确认删除?");
        if (dialogue === true) {
          Axios.delete('https://wd2291425721vzpohb.wilddogio.com/posts/' + this.id +'.json')
            .then((res) => {
              this.$router.push({ path: '/blog' });
            })
        }else {
          return false;
        }
      },
      editBlog: function () {
        this.$router.push({ path: '/blog/edit/' + this.id});
      }
    },
    created: function () {
      Axios.get('/posts/' + this.id +'.json')
          .then((res) => {
            return res.data;
          }).then( (res) => {
            this.blog = res;
        })
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" src="./SingleBlog.less"></style>
